<template>
    <div class="add-agents">
        <breadcrumb class="breadcrumb-container"></breadcrumb>
        <el-form :model="addForm" :rules="rules" label-width="130px" ref="addForm" size="small">
          <el-row>
            <div class="bb1" style="font-size: 14px;color:#324157;"><svg-icon icon-class="account"></svg-icon> 账号信息设置</div>
            <el-form-item label="代理商编号：">
              <span class="fz12">系统自动生成</span>
            </el-form-item>
            <el-form-item prop="agent_name" label="代理商名称：">
              <el-input placeholder="代理商名称不能超过30个字符" :maxlength="30" v-model="addForm.agent_name" class="w240"></el-input>
            </el-form-item>
            <el-form-item label="登录用户名：" prop="username">
              <el-input class="w240" placeholder="请使用电话号码作为登录用户名" :maxlength="11" type="text" v-model="addForm.username"></el-input>
            </el-form-item>
            <el-form-item label="登录密码：" prop="password">
              <el-input class="w240" type="password" placeholder="密码至少6位以上" :minlength="6" v-model="addForm.password"></el-input>
            </el-form-item>
            <el-form-item prop="respo_name" label="负责人姓名：">
              <el-input class="w240" placeholder="负责人姓名" v-model="addForm.respo_name"></el-input>
            </el-form-item>
            <el-form-item prop="telphone" label="联系电话：">
              <el-input class="w240" placeholder="国内11位手机号码" :maxlength="11" v-model="addForm.telphone"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <div class="bb1" style="font-size: 14px;color:#324157;"><svg-icon icon-class="agent"></svg-icon> 代理商设置</div>
            <el-form-item label="上级代理：">
              <span class="fz12">{{ pid.agent_name }}-代理区域（{{ pid.agent_region }}）</span>
            </el-form-item>
            <el-form-item label="是否允许发展下级：">
              <el-switch :disabled="roles[0] >= 2 ? true : false" v-model="addForm.is_sub"></el-switch>
            </el-form-item>
            <el-form-item label="是否开通营销平台：">
              <el-switch v-model="addForm.is_market"></el-switch>
            </el-form-item>
            <el-form-item label="代理商使用有效期：" prop="time">
              <el-date-picker type="daterange" class="w240" size="small" v-model="addForm.time" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="代理区域：" prop="proxy_area">
              <div class="tag">
                <el-tag :key="tag" v-for="tag in addForm.proxy_area" closable :disable-transitions="false" @close="handleClose(tag)">{{tag}}</el-tag>
                <el-cascader class="input-new-tag" size="small" change-on-select :options="addForm.address" v-if="inputVisible" ref="saveTagInput"  @change="(v)=>{this.inputValue = v}" @keyup.enter.native="handleInputConfirm"></el-cascader>
                <el-button size="small" class="new-tag-btn" icon="el-icon-plus" @click="showInput">{{ inputVisible ? '确定' : '增加' }}</el-button>
              </div>
            </el-form-item>
          </el-row>
        </el-form>
        <el-row>
          <div class="bb1 fz14" style="color:#324157;"><svg-icon icon-class="payChannel"></svg-icon> 支付通道及结算费率</div>
          <el-row>
            <div class="fz14 mt20"><span class="err">*</span>官方通道 <el-button type="text" size="small" @click="handleClickMyPrice('official')">查看我的结算价</el-button></div>
            <el-col :xl="10" :lg="10" :md="8" :sm="12" :xs="24">
              <el-form :model="channel" size="small" ref="channel">
                <table class="table">
                  <thead>
                    <tr>
                      <th colspan="1" rowspan="1">商户类型</th>
                      <th colspan="1" rowspan="1">微信</th>
                      <th colspan="1" rowspan="1">支付宝</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>普通（结算价）</td>
                      <td>
                        <el-form-item class='mb0' prop="p_wx_rate">
                          <el-input  class="w100" v-model="channel.p_wx_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                      <td>
                        <el-form-item class="mb0" prop="p_ali_rate">
                          <el-input  class="w100" v-model="channel.p_ali_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td>绿洲/蓝海（返佣比例）</td>
                      <td>
                        <el-form-item class="mb0" prop="l_wx_rate">
                          <el-input  class="w100" v-model="channel.l_wx_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                      <td>
                        <el-form-item class="mb0" prop="l_wx_rate">
                          <el-input  class="w100" v-model="channel.l_ali_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td>公益类（返佣比例）</td>
                      <td>
                        <el-form-item class="mb0" prop="g_wx_rate">
                          <el-input  class="w100" v-model="channel.g_wx_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                      <td>
                        <el-form-item class="mb0" prop="g_ali_rate">
                          <el-input  class="w100" v-model="channel.g_ali_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <div class="fz14 mt20"><span class="err">*</span>网商通道 <el-button type="text" size="small" @click="handleClickMyPrice('ws')">查看我的结算价</el-button></div>
            <el-col :xl="10" :lg="10" :md="8" :sm="12" :xs="24">
              <el-form :model="wsChannel" ref="wsChannel" size="small">
                <table class="table">
                  <thead>
                    <tr>
                      <th colspan="1" rowspan="1" >商户类型</th>
                      <th colspan="1" rowspan="1" >微信</th>
                      <th colspan="1" rowspan="1" >支付宝</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>普通（结算价）</td>
                      <td>
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="wsChannel.p_wx_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                      <td>
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="wsChannel.p_ali_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td>绿洲/蓝海（返佣比例）</td>
                      <td>-</td>
                      <td>
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="wsChannel.l_ali_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <div class="fz14 mt20"><span class="err">*</span>富民银行 <el-button type="text" size="small" @click="handleClickMyPrice('fumin')">查看我的结算价</el-button></div>
            <el-col :xl="10" :lg="10" :md="8" :sm="12" :xs="24">
              <el-form :model="fuChannel" size="small" ref="channel">
                <table class="table">
                  <thead>
                    <tr>
                      <th colspan="1" rowspan="1" >商户类型</th>
                      <th colspan="1" rowspan="1" >微信</th>
                      <th colspan="1" rowspan="1" >支付宝</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>普通（结算价）</td>
                      <td>
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="fuChannel.p_wx_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                      <td>
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="fuChannel.p_ali_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td>绿洲/蓝海（返佣比例）</td>
                      <td>
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="fuChannel.l_wx_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                      <td>
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="fuChannel.l_ali_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <div class="fz14 mt20"><span class="err">*</span>乐刷支付 <el-button type="text" size="small" @click="handleClickMyPrice('lepos')">查看我的结算价</el-button></div>
            <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
              <el-form :model="leChannel" size="small">
                <table class="table">
                  <thead>
                   <tr>
                     <th colspan="1" rowspan="3">交易类型</th>
                     <th colspan="1" rowspan="3">卡类型</th>
                     <th colspan="4">计算类型</th>
                    </tr>
                   <tr>
                     <th colspan="2">D+1</th>
                     <th colspan="2">D+0</th>
                   </tr>
                   <tr>
                     <th>≥1000元</th>
                     <th>&lt;1000元</th>
                     <th>≥1000元</th>
                     <th>&lt;1000元</th>
                   </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td rowspan="3">POS机刷卡</td>
                      <td>借记卡</td>
                      <td colspan="2">
                        <el-form-item class="mb0 db">
                          <el-input  class="w100" v-model.number="leChannel.pos_d1_j_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                        <el-form-item class="mb0 db">
                          <el-input  class="w100" v-model.number="leChannel.pos_d1_j_f"></el-input><span class="fz12">元封顶</span>
                        </el-form-item>
                      </td>
                      <td colspan="2">
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="leChannel.pos_d0_j_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td>贷记卡</td>
                      <td colspan="2"> 
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="leChannel.pos_d1_d_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                      <td colspan="2">
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="leChannel.pos_d0_d_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td>境外卡</td>
                      <td colspan="2">
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="leChannel.pos_d1_w_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                      <td colspan="2">
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="leChannel.pos_d0_w_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td rowspan="2">银联二维码/闪付</td>
                      <td>借记卡</td>
                      <td>
                        <el-form-item class="mb0 db">
                          <el-input  class="w100" v-model.number="leChannel.yl_d1_j_b1000_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                        <el-form-item class="mb0 db">
                          <el-input  class="w100" v-model.number="leChannel.yl_d1_j_b1000_f"></el-input><span class="fz12">元封顶</span>
                        </el-form-item>
                      </td>
                      <td>
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="leChannel.yl_d1_j_s1000_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                      <td>
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="leChannel.yl_d0_j_b1000_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                      <td>
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="leChannel.yl_d0_j_s1000_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td>贷记卡</td>
                      <td>
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="leChannel.yl_d1_d_b1000_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                      <td>
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="leChannel.yl_d1_d_s1000_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                        
                      </td>
                      <td>
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="leChannel.yl_d0_d_b1000_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                        
                      </td>
                      <td>
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="leChannel.yl_d0_d_s1000_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td>扫码支付</td>
                      <td>微信/支付宝</td>
                      <td colspan="2">
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="leChannel.s_d1_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                      <td colspan="2">
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="leChannel.s_d0_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <div class="fz14 mt20"><span class="err">*</span>新大陆 <el-button type="text" size="small" @click="handleClickMyPrice('starpos')">查看我的结算价</el-button></div>
            <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
              <el-form :model="xdlChannel" ref="xdlChannel" size="small">
                <table class="table">
                  <thead>
                    <tr>
                      <th rowspan="3">交易类型</th>
                      <th rowspan="3">卡类型</th>
                      <th colspan="2">结算类型</th>
                    </tr>
                    <tr>
                      <th colspan="2">T+1</th>
                    </tr>
                    <tr>
                      <th>≥1000元</th>
                      <th>&lt;1000元</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td rowspan="2">POS机刷卡</td>
                      <td>借记卡</td>
                      <td colspan="2">
                        <el-form-item class="mb0 db">
                          <el-input  class="w100" v-model.number="xdlChannel.pos_t1_j_b1000_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                        <el-form-item class="mb0 db">
                          <el-input  class="w100" v-model.number="xdlChannel.pos_t1_j_b1000_f"></el-input><span class="fz12">元封顶</span>
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td>贷记卡</td>
                      <td colspan="2">
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="xdlChannel.pos_t1_d_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td rowspan="2">银联二维码/闪付</td>
                      <td>借记卡</td>
                      <td>
                        <el-form-item class="mb0 db">
                          <el-input  class="w100" v-model.number="xdlChannel.yl_t1_j_b1000_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                        <el-form-item class="mb0 db">
                          <el-input  class="w100" v-model.number="xdlChannel.yl_t1_j_b1000_f"></el-input><span class="fz12">元封顶</span>
                        </el-form-item>
                      </td>
                      <td>
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="xdlChannel.yl_t1_j_s1000_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td>贷记卡</td>
                      <td>
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="xdlChannel.yl_t1_d_b1000_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                      <td>
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="xdlChannel.yl_t1_d_s1000_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td>扫码支付</td>
                      <td>微信/支付宝</td>
                      <td colspan="2">
                        <el-form-item class="mb0">
                          <el-input  class="w100" v-model.number="xdlChannel.s_t1_rate" :maxlength="5"></el-input>%
                        </el-form-item>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </el-form>
            </el-col>
          </el-row>
        </el-row>
        <el-row>
          <p class="err">* 结算方式收益 =（商户费率-代理商结算价）*  商户交易流水</p>
          <p class="err">* 返佣比例收益 =  返佣比例  *   商户交易流水</p>
        </el-row>
        <el-row class="mt20 mb20">
          <el-button type="primary" size="small" :loading="loading" @click="handleClickSubmit">保存资料</el-button>
        </el-row>
        <el-dialog :visible.sync="dialog" width="600px" :title="title">
          <table class="table mt-10" v-if="active === 'official'">
            <thead>
              <tr>
                <th colspan="1" rowspan="1">商户类型</th>
                <th colspan="1" rowspan="1">微信</th>
                <th colspan="1" rowspan="1">支付宝</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>普通（结算价）</td>
                <td>
                  <span class="fz12">{{ official_item.p_wx_rate }}%</span>
                </td>
                <td>
                  <span class="fz12">{{official_item.p_ali_rate}}%</span>
                </td>
              </tr>
              <tr>
                <td>绿洲/蓝海（返佣比例）</td>
                <td>
                  <span class="fz12">{{ official_item.l_wx_rate }}</span>%
                </td>
                <td>
                  <span class="fz12">{{ official_item.l_ali_rate }}%</span>
                </td>
              </tr>
              <tr>
                <td>公益类（返佣比例）</td>
                <td>
                  <span class="fz12">{{ official_item.g_wx_rate }}%</span>
                </td>
                <td>
                  <span class="fz12">{{ official_item.g_ali_rate }}%</span>
                </td>
              </tr>
            </tbody>
          </table>
          <table class="table mt-10" v-if="active === 'ws'">
            <thead>
              <tr>
                <th colspan="1" rowspan="1" >商户类型</th>
                <th colspan="1" rowspan="1" >微信</th>
                <th colspan="1" rowspan="1" >支付宝</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>普通（结算价）</td>
                <td>
                  <span class="fz12">{{ ws_item.p_wx_rate }}%</span>
                </td>
                <td>
                  <span class="fz12">{{ ws_item.p_ali_rate }}%</span>
                </td>
              </tr>
              <tr>
                <td>绿洲/蓝海（返佣比例）</td>
                <td>-</td>
                <td>
                  <span class="fz">{{ ws_item.l_ali_rate }}%</span>
                </td>
              </tr>
            </tbody>
          </table>
          <table class="table mt-10" v-if="active === 'fumin'">
            <thead>
              <tr>
                <th colspan="1" rowspan="1" >商户类型</th>
                <th colspan="1" rowspan="1" >微信</th>
                <th colspan="1" rowspan="1" >支付宝</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>普通（结算价）</td>
                <td>
                  <span class="fz12">{{ fu_item.p_wx_rate }}%</span>
                </td>
                <td>
                  <span class="fz">{{ fu_item.p_ali_rate }}%</span>
                </td>
              </tr>
              <tr>
                <td>绿洲/蓝海（返佣比例）</td>
                <td>
                  <span class="fz12">{{ fu_item.l_wx_rate }}%</span>
                </td>
                <td>
                  <span class="fz12">{{ fu_item.l_ali_rate }}%</span>
                </td>
              </tr>
            </tbody>
          </table>
          <table class="table mt-10" v-if="active === 'lepos'">
            <thead>
              <tr>
                <th colspan="1" rowspan="3">交易类型</th>
                <th colspan="1" rowspan="3">卡类型</th>
                <th colspan="4">计算类型</th>
              </tr>
              <tr>
                <th colspan="2">D+1</th>
                <th colspan="2">D+0</th>
              </tr>
              <tr>
                <th>≥1000元</th>
                <th>&lt;1000元</th>
                <th>≥1000元</th>
                <th>&lt;1000元</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td rowspan="3">POS机刷卡</td>
                <td>借记卡</td>
                <td colspan="2">
                  <span class="fz12">{{ le_item.pos_d1_j_rate }}%</span>，<span class="fz12">封顶{{ le_item.pos_d1_j_f }}元</span>
                </td>
                <td colspan="2">
                  <span class="fz12">{{ le_item.pos_d0_j_rate }}%</span>
                </td>
              </tr>
              <tr>
                <td>贷记卡</td>
                <td colspan="2"> 
                  <span class="fz12">{{ le_item.pos_d1_d_rate }}%</span>
                </td>
                <td colspan="2">
                  <span class="fz12">{{ le_item.pos_d0_d_rate }}%</span>
                </td>
              </tr>
              <tr>
                <td>境外卡</td>
                <td colspan="2">
                  <span class="fz12">{{ le_item.pos_d1_w_rate }}%</span>
                </td>
                <td colspan="2">
                  <span class="fz">{{ le_item.pos_d0_w_rate }}%</span>
                </td>
              </tr>
              <tr>
                <td rowspan="2">银联二维码/闪付</td>
                <td>借记卡</td>
                <td>
                  <span class="fz">{{ le_item.yl_d1_j_b1000_rate }}%，</span>
                  <span class="fz12">封顶{{ le_item.yl_d1_j_b1000_f }}元</span>
                </td>
                <td>
                  <span class="fz12">{{ le_item.yl_d1_j_s1000_rate }}%</span>
                </td>
                <td>
                  <span class="fz">{{ le_item.yl_d0_j_b1000_rate }}%</span>
                </td>
                <td>
                  <span class="fz12">{{ le_item.yl_d0_j_s1000_rate }}%</span>
                </td>
              </tr>
              <tr>
                <td>贷记卡</td>
                <td>
                  <span class="fz12">{{ le_item.yl_d1_d_b1000_rate }}%</span>
                </td>
                <td>
                  <span class="fz12">{{ le_item.yl_d1_d_s1000_rate }}%</span>
                </td>
                <td>
                 <span class="fz12">{{ le_item.yl_d0_d_b1000_rate }}%</span>
                </td>
                <td>
                  <span class="fz12">{{ le_item.yl_d0_d_s1000_rate }}%</span>
                </td>
              </tr>
              <tr>
                <td>扫码支付</td>
                <td>微信/支付宝</td>
                <td colspan="2">
                  <span class="fz12">{{ le_item.s_d1_rate }}%</span>
                </td>
                <td colspan="2">
                  <span class="fz12">{{ le_item.s_d0_rate }}%</span>
                </td>
              </tr>
            </tbody>
          </table>
          <table class="table mt-10" v-if="active === 'starpos'">
            <thead>
              <tr>
                <th rowspan="3">交易类型</th>
                <th rowspan="3">卡类型</th>
                <th colspan="2">结算类型</th>
              </tr>
              <tr>
                <th colspan="2">T+1</th>
              </tr>
              <tr>
                <th>≥1000元</th>
                <th>&lt;1000元</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td rowspan="2">POS机刷卡</td>
                <td>借记卡</td>
                <td colspan="2">
                  <span class="fz12">{{ xdl_item.pos_t1_j_b1000_rate }}%，</span>
                  <span class="fz12">封顶{{ xdl_item.pos_t1_j_b1000_f }}元</span>
                </td>
              </tr>
              <tr>
                <td>贷记卡</td>
                <td colspan="2">
                  <span class="fz12">{{ xdl_item.pos_t1_d_rate }}%</span>
                </td>
              </tr>
              <tr>
                <td rowspan="2">银联二维码/闪付</td>
                <td>借记卡</td>
                <td>
                  <span class="fz12">{{ xdl_item.yl_t1_j_b1000_rate }}%，</span>
                  <span class="fz12">封顶{{ xdl_item.yl_t1_j_b1000_f }}元</span>
                </td>
                <td>
                  <span class="fz12">{{ xdl_item.yl_t1_j_s1000_rate }}%</span>
                </td>
              </tr>
              <tr>
                <td>贷记卡</td>
                <td>
                  <span class="fz12">{{ xdl_item.yl_t1_d_b1000_rate }}%</span>
                </td>
                <td>
                  <span class="fz12">{{ xdl_item.yl_t1_d_s1000_rate }}%</span>
                </td>
              </tr>
              <tr>
                <td>扫码支付</td>
                <td>微信/支付宝</td>
                <td colspan="2">
                  <span class="fz12">{{ xdl_item.s_t1_rate }}%</span>
                </td>
              </tr>
            </tbody>
          </table>
        </el-dialog>
    </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { addAgent, GetMySettlePrice, GetCurrentAgentInfo } from '@/api/myAngent'
import { address } from '@/api/address'
import { validatePhone, validateCn } from '@/utils/validate'
import { mapGetters } from 'vuex'

export default {
  name: 'addAgents',
  data() {
    const validatePassWord = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能小于6位哟~'))
      } else {
        callback()
      }
    }
    const validateRespoName = (rule, value, callback) => {
      if (value === '' || value === undefined) {
        callback(new Error('不能为空哟~'))
      } else {
        callback()
      }
    }
    const validateTelPhone = (rule, value, callback) => {
      if (value.length !== 11 || !validatePhone(value) || value === undefined) {
        callback(new Error('手机号码格式不对哟~'))
      } else {
        callback()
      }
    }
    const validateAddress = (rule, value, callback) => {
      if (value === []) {
        callback(new Error('代理区域选择不能为空哟~'))
      } else {
        callback()
      }
    }
    const validateSplic = (rule, value, callback) => {
      if (!validateCn(value)) {
        callback(new Error('输入有误哟~'))
      } else {
        callback()
      }
    }
    return {
      addForm: {
        agent_name: '',
        username: '',
        password: '',
        respo_name: '',
        telphone: '',
        is_sub: '',
        is_market: '',
        agent_region: '',
        address: [],
        proxy_area: [],
        address_area: [],
        area_address: [],
        time: null,
        url: process.env.BASE_API + '/merchant/uploadCommer'
      },
      rules: {
        agent_name: [{ required: true, trigger: 'blur', validator: validateSplic }],
        username: [{ required: true, trigger: 'blur', validator: validateTelPhone }],
        password: [{ required: true, trigger: 'blur', validator: validatePassWord }],
        respo_name: [{ required: true, trigger: 'blur', validator: validateRespoName }],
        telphone: [{ required: true, trigger: 'blur', validator: validateTelPhone }],
        proxy_area: [{ required: true, trigger: 'blur', validator: validateAddress }],
        time: [{ required: true, trigger: 'blur', message: '不能为空哦~' }]
      },
      pid: {
        pid_agent_name: '',
        pid_agent_region: ''
      },
      inputValue: '',
      inputVisible: false,
      loading: false,
      openShow: false,
      dialog: false,
      active: null,
      title: null,
      Address: [],
      channel: {
        p_wx_rate: '',
        p_ali_rate: '',
        l_wx_rate: '',
        l_ali_rate: '',
        g_wx_rate: '',
        g_ali_rate: ''
      },
      official_item: {
        p_wx_rate: '',
        p_ali_rate: '',
        l_wx_rate: '',
        l_ali_rate: '',
        g_wx_rate: '',
        g_ali_rate: ''
      },
      wsChannel: {
        p_wx_rate: '',
        p_ali_rate: '',
        l_ali_rate: ''
      },
      ws_item: {
        p_wx_rate: '',
        p_ali_rate: '',
        l_ali_rate: ''
      },
      fuChannel: {
        p_wx_rate: '',
        p_ali_rate: '',
        l_wx_rate: '',
        l_ali_rate: ''
      },
      fu_item: {
        p_wx_rate: '',
        p_ali_rate: '',
        l_wx_rate: '',
        l_ali_rate: ''
      },
      leChannel: {
        pos_d1_j_rate: '',
        pos_d1_j_f: '',
        pos_d1_d_rate: '',
        pos_d1_w_rate: '',
        pos_d0_j_rate: '',
        pos_d0_d_rate: '',
        pos_d0_w_rate: '',
        yl_d1_j_b1000_rate: '',
        yl_d1_j_b1000_f: '',
        yl_d1_j_s1000_rate: '',
        yl_d0_j_b1000_rate: '',
        yl_d0_j_s1000_rate: '',
        yl_d1_d_b1000_rate: '',
        yl_d1_d_s1000_rate: '',
        yl_d0_d_b1000_rate: '',
        yl_d0_d_s1000_rate: '',
        s_d1_rate: '',
        s_d0_rate: ''
      },
      le_item: {
        pos_d1_j_rate: '',
        pos_d1_j_f: '',
        pos_d1_d_rate: '',
        pos_d1_w_rate: '',
        pos_d0_j_rate: '',
        pos_d0_d_rate: '',
        pos_d0_w_rate: '',
        yl_d1_j_b1000_rate: '',
        yl_d1_j_b1000_f: '',
        yl_d1_j_s1000_rate: '',
        yl_d0_j_b1000_rate: '',
        yl_d0_j_s1000_rate: '',
        yl_d1_d_b1000_rate: '',
        yl_d1_d_s1000_rate: '',
        yl_d0_d_b1000_rate: '',
        yl_d0_d_s1000_rate: '',
        s_d1_rate: '',
        s_d0_rate: ''
      },
      xdlChannel: {
        pos_t1_j_b1000_rate: '',
        pos_t1_j_s1000_rate: '',
        pos_t1_j_b1000_f: '',
        pos_t1_d_rate: '',
        yl_t1_j_b1000_rate: '',
        yl_t1_j_b1000_f: '',
        yl_t1_j_s1000_rate: '',
        yl_t1_d_b1000_rate: '',
        yl_t1_d_s1000_rate: '',
        s_t1_rate: ''
      },
      xdl_item: {
        pos_t1_j_b1000_rate: '',
        pos_t1_j_s1000_rate: '',
        pos_t1_j_b1000_f: '',
        pos_t1_d_rate: '',
        yl_t1_j_b1000_rate: '',
        yl_t1_j_b1000_f: '',
        yl_t1_j_s1000_rate: '',
        yl_t1_d_b1000_rate: '',
        yl_t1_d_s1000_rate: '',
        s_t1_rate: ''
      }
    }
  },
  components: {
    Breadcrumb
  },
  methods: {
    handleClose(tag) {
      this.addForm.proxy_area.splice(this.addForm.proxy_area.indexOf(tag), 1)
      for (let index = 0; index < this.Address.length; index++) {
        if (this.Address[index].label === tag) {
          this.Address.splice(index, 1)
        }
      }
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      this.addForm.address_area.push(inputValue.toString().replace(/\,/g, '-'))
      let province, city, area, provinceVal, cityVal, areaVal
      for (let index = 0; index < this.addForm.address.length; index++) {
        if (this.addForm.address[index].value === inputValue[0]) {
          province = this.addForm.address[index].label
          provinceVal = this.addForm.address[index].value
          if (inputValue.length >= 2) {
            for (let i = 0; i < this.addForm.address[index].children.length; i++) {
              if (this.addForm.address[index].children[i].value === inputValue[1]) {
                city = this.addForm.address[index].children[i].label
                cityVal = this.addForm.address[index].children[i].value
                if (inputValue.length >= 3) {
                  for (let j = 0; j < this.addForm.address[index].children[i].children.length; j++) {
                    if (this.addForm.address[index].children[i].children[j].value === inputValue[2]) {
                      area = this.addForm.address[index].children[i].children[j].label
                      areaVal = this.addForm.address[index].children[i].children[j].value
                    }
                  }
                }
              }
            }
          }
        }
      }
      if (inputValue) {
        const arr = []
        const name = []
        if (province !== undefined) {
          arr.push(provinceVal)
          name.push(province)
        }
        if (city !== undefined) {
          arr.push(cityVal)
          name.push(city)
        }
        if (area !== undefined) {
          arr.push(areaVal)
          name.push(area)
        }
        if (this.addForm.proxy_area.indexOf('全国') !== -1) {
          this.$message.error('已经有最高区域咯~')
        } else {
          if (this.addForm.proxy_area.indexOf(name.toString().replace(/\//g, '-')) === -1) {
            this.addForm.proxy_area.push(name.toString().replace(/\,/g, '-'))
            const obj = { 'label': name.toString().replace(/\,/g, '-'), 'value': arr.toString().replace(/\,/g, '-') }
            this.Address.push(obj)
          } else {
            this.$message.error('已经添加过了哟~')
          }
        }
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    showInput() {
      if (!this.inputValue) {
        this.inputVisible = true
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus()
          address(this.id).then(response => {
            this.addForm.address = response.data.result
          })
        })
      } else {
        this.handleInputConfirm()
      }
    },
    handleClickSubmit() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          this.addForm.area_address = this.Address
          this.loading = true
          addAgent(this.addForm, this.channel, this.wsChannel, this.fuChannel, this.leChannel, this.xdlChannel).then(response => {
            if (response.data.errorCode === 0) {
              this.$message.success('操作成功')
              this.$refs['addForm'].resetFields()
              this.loading = false
              this.$router.go(-1)
            } else {
              this.$message.error(response.data.errorMsg)
              this.loading = false
            }
          })
        } else {
          this.$message.error('请正确填写表单数据哟~')
        }
      })
    },
    handleClickMyPrice(type) {
      GetMySettlePrice(type).then(res => {
        if (res.data.errorCode === 0) {
          this.dialog = true
          type === 'official' ? this.active = 'official' : type === 'ws' ? this.active = 'ws' : type === 'fumin' ? this.active = 'fumin' : type === 'lepos' ? this.active = 'lepos' : type === 'starpos' ? this.active = 'starpos' : ''
          type === 'official' ? this.title = '官方通道' : type === 'ws' ? this.title = '网商银行' : type === 'fumin' ? this.title = '富民银行' : type === 'lepos' ? this.title = '乐刷' : type === 'starpos' ? this.title = '新大陆' : ''
          if (type === 'official') {
            this.official_item.p_wx_rate = res.data.result.official.wx.normal
            this.official_item.p_ali_rate = res.data.result.official.ali.normal
            this.official_item.l_wx_rate = res.data.result.official.wx.green
            this.official_item.l_ali_rate = res.data.result.official.ali.blue
            this.official_item.g_wx_rate = res.data.result.official.wx.charity
            this.official_item.g_ali_rate = res.data.result.official.wx.charity
          }
          if (type === 'ws') {
            this.ws_item.p_wx_rate = res.data.result.ws.wx.normal
            this.ws_item.p_ali_rate = res.data.result.ws.ali.normal
            this.ws_item.l_ali_rate = res.data.result.ws.ali.blue
          }
          if (type === 'fumin') {
            this.fu_item.p_wx_rate = res.data.result.fumin.wx.normal
            this.fu_item.p_ali_rate = res.data.result.fumin.ali.normal
            this.fu_item.l_wx_rate = res.data.result.fumin.wx.green
            this.fu_item.l_ali_rate = res.data.result.fumin.ali.blue
          }
          if (type === 'lepos') {
            this.le_item.pos_d1_j_rate = res.data.result.lepos_swipe.debit.d1.rate
            this.le_item.pos_d1_j_f = res.data.result.lepos_swipe.debit.d1.ceiling
            this.le_item.pos_d1_d_rate = res.data.result.lepos_swipe.credit.d1.rate
            this.le_item.pos_d1_w_rate = res.data.result.lepos_swipe.ovsea.d1.rate
            this.le_item.pos_d0_j_rate = res.data.result.lepos_swipe.debit.d0.rate
            this.le_item.pos_d0_d_rate = res.data.result.lepos_swipe.credit.d0.rate
            this.le_item.pos_d0_w_rate = res.data.result.lepos_swipe.ovsea.d0.rate
            this.le_item.yl_d1_j_b1000_rate = res.data.result.lepos_unipay.debit.d1.greater.rate
            this.le_item.yl_d1_j_b1000_f = res.data.result.lepos_unipay.debit.d1.greater.ceiling
            this.le_item.yl_d1_j_s1000_rate = res.data.result.lepos_unipay.debit.d1.less.rate
            this.le_item.yl_d0_j_b1000_rate = res.data.result.lepos_unipay.debit.d0.greater.rate
            this.le_item.yl_d0_j_s1000_rate = res.data.result.lepos_unipay.debit.d0.less.rate
            this.le_item.yl_d1_d_b1000_rate = res.data.result.lepos_unipay.credit.d1.greater.rate
            this.le_item.yl_d1_d_s1000_rate = res.data.result.lepos_unipay.credit.d1.less.rate
            this.le_item.yl_d0_d_b1000_rate = res.data.result.lepos_unipay.credit.d0.greater.rate
            this.le_item.yl_d0_d_s1000_rate = res.data.result.lepos_unipay.credit.d0.less.rate
            this.le_item.s_d1_rate = res.data.result.lepos_mob.d1.rate
            this.le_item.s_d0_rate = res.data.result.lepos_mob.d0.rate
          }
          if (type === 'starpos') {
            this.xdl_item.pos_t1_j_b1000_rate = res.data.result.starpos_swipe.debit.t1.rate
            this.xdl_item.pos_t1_j_b1000_f = res.data.result.starpos_swipe.debit.t1.ceiling
            this.xdl_item.pos_t1_d_rate = res.data.result.starpos_swipe.credit.t1.rate
            this.xdl_item.yl_t1_j_b1000_rate = res.data.result.starpos_unipay.debit.t1.greater.rate
            this.xdl_item.yl_t1_j_b1000_f = res.data.result.starpos_unipay.debit.t1.greater.ceiling
            this.xdl_item.yl_t1_j_s1000_rate = res.data.result.starpos_unipay.debit.t1.less.rate
            this.xdl_item.yl_t1_d_b1000_rate = res.data.result.starpos_unipay.credit.t1.greater.rate
            this.xdl_item.yl_t1_d_s1000_rate = res.data.result.starpos_unipay.credit.t1.less.rate
            this.xdl_item.s_t1_rate = res.data.result.starpos_mob.t1.rate
          }
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'roles'
    ])
  },
  created() {
    GetCurrentAgentInfo().then(res => {
      if (res.data.errorCode === 0) {
        this.pid.agent_region = res.data.result.agent_region
        this.pid.agent_name = res.data.result.agent_name
      } else {
        this.$message.error(res.data.errorMsg)
      }
    })
  }
}
</script>